import { connect } from 'dva'
import styles from './Suitable.scss'
import { Checkbox } from 'antd'
import { Button, Toast } from 'antd-mobile'

const Suitable = ({dispatch, 
  contractSign:{
    contract:{agree}
  },
  query
}) => {
  // 同意服务
  const onChange = (e) => {
    dispatch({
      type: 'contractSign/changeAgree',
      payload: {
        contract: {
          agree:e.target.checked
        }
      }
    })
    console.log(e.target.checked)
  }
  const agreeAct = () => {
    if (!agree) {
      Toast.info('请先同意服务协议', 1)
    } else {
      dispatch({
        type: 'modules/getModules',
        payload: {
          pathname: '',
          businessId: '1231241227',
          process: 'contractSign',
          title: '电子合同签署',
          query:query
        }
      })
    }
  }
  return (
    <div className={styles.suitableContainer}>
      <div className={styles.contentContainer}>
        <div className={styles.contentTitle}>
          {query.title}
        </div>
        <div className={styles.productContainer}>
         {query.type === 'OTO' ? <div className={styles.productType}>
            <span>OTO产品</span>
          </div> : null
         }
          <div className={styles.productCode}>{query.code}</div>
        </div>
        <div className={styles.textContainer}>
          <div className={styles.textTitle}>尊敬的投资者:</div>
          <div style={{ opacity: '0' }}>间隔</div>
          <div>
            <span className={styles.importantFont}>您/贵机构的风险承受能力等级为</span><span className={styles.orangeFont}>C4(积极型)</span>，依据我司的投资者与产品风险等级匹配规则，您/贵机构的风险承受能力等级与（申银万国宝鼎16期限额特定集合资产管理计划，属于股票型产品）风险等级相匹配。
          </div>
          <div style={{ opacity: '0' }}>间隔</div>
          <div>
            本适当性评估意见供您决策参考，并不代表本公司对上述产品的风险或收益作出实质性判断和保证。
          </div>
          <div style={{ opacity: '0' }}>间隔</div>
          <div>
            本公司就上述适当性评估结果与您进行确认，并建议您审慎考察该产品的特征及风险，进行充分风险评估，自行做出投资决定。
          </div>
        </div>
        <div className={styles.resultTip}>
          <span>
            如同意我公司评估结果，请确认投资者确认书，以示同意。
          </span>
        </div>
      </div>
      <div className={styles.investConfirmation}>
        <div className={styles.investTitle}>
          <span>
            投资者确认书
          </span>
        </div>
        <div className={styles.investContent}>
          <div className={styles.investHead}>
            申万宏源证券有限公司:
          </div>
          <div style={{ opacity: '0' }}>间隔</div>
          <div>
          1、本人/本机构已认真阅读了该产品合同及风险揭示书等材料，并已充分了解该产品的特征和风险。
          </div>
          <div style={{ opacity: '0' }}>间隔</div>
          <div>
            2、本人/本机构已仔细阅读贵司的《适当性匹配意见告知书》，已充分知晓并理解贵司对本人/本机构的风险承受能力评估及产品风险等级匹配结果。
          </div>
          <div style={{ opacity: '0' }}>间隔</div>
          <div>
           3、本人/本机构对该《适当性匹配意见告知书》内容没有异议，愿意遵守法律、法规及贵司有关规定，通过贵司购买该产品。
          </div>
          <div style={{ opacity: '0' }}>间隔</div>
          <div>
            4、本确认书系本人/本机构独立、自主、真实的意思表示。
          </div>
          <div className={styles.investSign}>
            <div>投资者确认书: <span className={styles.orangeFont}>张三峰</span></div>
            <div>日期: <span className={styles.orangeFont}>2018/01/23</span></div>
          </div>
        </div>
      </div>
      <div className={styles.agree}>
        <Checkbox onChange={onChange}>
          <span className={styles.textSize}>
            本次认购所用资金为本人（本机构）合法所有的自有资金，本人（本机构）未使用贷款、发行债券等方式筹集的非自有资金进行本次认/申购。
          </span>
        </Checkbox>
      </div>
      <div className={styles.buttonSize}>
        <Button type='primary' onClick={agreeAct} className={styles.longButton}>同意协议并下一步</Button>
      </div>
    </div>
  )
}
const mapState = state => {
  return {
    contractSign:state.contractSign,
    query:state.modules.query
  }
}
export default connect(mapState)(Suitable)
